import React from 'react'
import { Card, Image,List } from 'antd-mobile'
import style from '../list/index.module.css'
import { RightOutline } from 'antd-mobile-icons'
function Index() {

    const users = [
        {
            avatar: 'https://img0.baidu.com/it/u=600722015,3838115472&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750',
            title: '艺术展览',
            eleg: 'Merufest 2024',
            date: '2024-02-11',
            price: '￥289',
            addpei: '182参与者'
        },
        {
            avatar: 'https://img0.baidu.com/it/u=3677381888,3027116986&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=758',
            title: '专业研讨会',
            eleg: '项目研究标题实例',
            date: '2024-02-11',
            price: '免费',
            addpei: '381参与者'
        },
        {
            avatar: 'https://img0.baidu.com/it/u=1824618618,3913535274&fm=253&fmt=auto&app=138&f=JPEG?w=489&h=332',
            title: '体育锦标赛',
            eleg: '国际足联世界杯',
            date: '2024-02-11',
            price: '￥289',
            addpei: '182参与者'
        }
    ]

       const list = [
      {
        avatar:'https://img2.baidu.com/it/u=1072948171,3215120972&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=700',
        name:'现场音乐会',
        title:'12活动',
        date:<RightOutline />
      },
       {
        avatar:'https://img0.baidu.com/it/u=3128582133,2078862922&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1199',
        name:'艺术展览',
        title:'8活动',
        date:<RightOutline />
      },
       {
        avatar:'https://img0.baidu.com/it/u=1197364575,1651785687&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=810',
        name:'体育锦标赛',
        title:'46活动',
        date:<RightOutline />
      },
    ]
    return (
        <div>
            <Card title="类别" extra={<span style={{ color: '#6a6cdeff' }}>查看全部</span>}>
                <List>
      {list.map(user => (
        <List.Item
          key={user.name}
          extra={user.date}
          prefix={
            <Image
              src={user.avatar}
              style={{ borderRadius: 20 }}
              fit='cover'
              width={40}
              height={40}
            />
          }
          description={user.title}
        >
          {user.name}
        </List.Item>
      ))}
    </List>
            </Card>


            <Card title="进行中" extra={<span style={{ color: '#6a6cdeff' }}>查看全部</span>}>
                {users.map((item, index) => (
                    <div className={style.liebiao} key={index}>
                        <Image style={{ width: '100px', height: '100px', borderRadius: '12px' }} src={item.avatar}></Image>
                        <div className={style.titles}>
                            <li style={{ color: '#ccc' }}>{item.title}</li>
                            <li>{item.eleg}</li>
                            <li>{item.addpei}</li>
                        </div>

                        <div className={style.righttit}>
                            <li className={style.prices}>{item.price}</li>
                            <li style={{ color: '#ccc' }}>{item.date}</li>
                        </div>

                    </div>
                ))}
            </Card>
        </div>
    )
}

export default Index
